import React, { Component } from 'react'
import styles from './History.less'
import cusAvatar from '@/assets/imgs/cusAvatar.png'
import wosAvatar from '@/assets/imgs/wosAvatar.png'
import avatar from '@/assets/imgs/avatar.png'
import { Uploader } from 'antd-pro-toolkit'
import { Popover } from 'antd'
import MyIcon from '@/components/MyIcon'

class History extends Component {
  status = { 0: '待处理', 1: '处理中', 2: '已解决' }
  render() {
    const { history, isWorkOrder } = this.props
    let content = (
      <Uploader width={300} isView={true} value={history.fileInfoList} type='list'></Uploader>
    )
    const isCreate = !history.id;
    const isReply = !history.nextTransactor && history.nextStatus !== 2;
    const isCusReply = history.replySource === 'CUS'
    const isWosReply = history.replySource === 'WOS' || history.replySource === 'WMS' || history.replySource === 'SPS' || history.nextStatus === 2
    const passClassName = isWorkOrder ? history.nextStatus === 2 ? `${styles.box} ${styles.pass}` : `${styles.box}` : history.nextStatus ? `${styles.box} ${styles.pass}` : `${styles.box}`
    return (
      <div className={styles.container}>
        <div className={passClassName}>

          <div className={styles.avatarBox}>
            {
              isWorkOrder ? isCusReply ?
                <img src={cusAvatar} alt="客户" className={styles.avatar} /> :
                <img src={avatar} alt="客服" className={styles.avatar} />
                : isWosReply ?
                  <img src={wosAvatar} alt="wos" className={styles.avatar} /> :
                  <img src={avatar} alt="客服" className={styles.avatar} />
            }
          </div>
          <div className={styles.infoBox}>
            <div className={styles.info}>
              <span className={styles.name}>{history.transactorName}</span>
              {
                isWorkOrder ?
                  <>
                    {!isReply && <span className={styles.action}>{history.nextStatus === 2 ? '' : '流转给'}</span>}
                    <span className={styles.name}>{history.nextTransactorName}</span>
                    {!isReply && <span className={styles.status}>[{this.status[history.nextStatus]}{history.exchangeBlock && `-${history.block ? '留库' : '放行'}`}]</span>}
                  </>
                  :
                  <>
                    {history.nextStatus === 1 && <span className={styles.status}>[同意放货]</span>}
                    {history.nextStatus === 2 && <span className={styles.status}>[放货]</span>}
                  </>
              }
              {
                isCreate && <>
                  <span className={styles.action}>创建工单</span>
                  <span className={styles.status}>[{this.status[history.nextStatus]}{history.block && '-留库'}]</span>
                </>
              }
              <span className={styles.time}>{history.transactTime}</span>

            </div>
            <div className={styles.content}>
              {history.opinion}
              <span className={styles.file}>
                {history.fileInfoList && history.fileInfoList.length !== 0 && <Popover trigger='focus' content={content}>
                  <button style={{ width: 30, height: 30, padding: 0, border: 0, outline: 0 }}>
                    <MyIcon type='iconoss---gongdan-fujian' style={{ fontSize: '30px', cursor: 'pointer' }}></MyIcon>
                  </button>
                </Popover>}
              </span>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default History
